<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { RouteMap } from 'vue-router'
import { useUserStore } from '@/stores'

import { Notify, showNotify, Toast } from 'vant'

import logo from '~/images/logo.svg'
import logoDark from '~/images/logo-dark.svg'
import vw from '@/utils/inline-px-to-vw'
import request from '@/utils/request'

// 从原来项目中copy过来的
import { VaeStore } from '../../stores/mystore/index'
import { setCookies, storage } from '../../stores/mystore/auth'

const store = VaeStore()

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)

const dark = ref<boolean>(isDark.value)

watch(
  () => isDark.value,
  (newMode) => {
    dark.value = newMode
  },
)

const postData = reactive({
  uName: '',
  uPwdword: '',
})

const rules = reactive({
  uName: [
    { required: true, message: '请输入用户名' },
  ],
  uPwdword: [
    { required: true, message: '请输入密码' },
  ],
})

async function login(values: any) {
  try {
    loading.value = true

    console.log('登录信息', postData)

    // await userStore.login({ ...postData, ...values })

    const res = await request.post('/dragon/login', postData)
    console.log('登录成功返回的信息', res.data)

    if (res.code == 200 && res.msg === '登录成功') {
      if (res.data.freeze_ornnt == 1) {
        showNotify({ type: 'warning', message: '账号已被冻结，请联系管理员!' })
        postData.uPwdword = ''
        postData.uName = ''
        return
      }

      showNotify({ type: 'success', message: '登录成功' })

      store.setuserInfo(res.data) // pinia存储信息
      store.setappleToken('这里是token')

      setCookies('appleToken', 'this is a token you can get it by getToken') // cookie存储用户信息
      // setCookies('userInfo',JSON.stringify(res.data))

      // 设置 storage
      storage.set('userInfo', res.data, {
        type: 'local',
        expires: 1, // 一天过期
        encrypt: false, // 是否加密
      })
      // storage.set('userInfo', res.data, {type: 'session', expires: 1, encrypt: false,});
      // storage.set('userInfo', res.data, { type: 'cookie', expires: 1, encrypt: false,});

      // router.replace({ name: 'home' }) // 返回首页
      router.replace({ name: 'profile' }) // 返回我的
    }
    if (res.code == 200 && res.msg === '密码错误') {
      showNotify({ type: 'warning', message: '密码错误' })
      postData.uPwdword = ''
    }
    if (res.code == 200 && res.msg === '用户不存在') {
      showNotify({ type: 'warning', message: '用户不存在' })
      postData.uPwdword = ''
      postData.uName = ''
    }

    // const { redirect, ...othersQuery } = router.currentRoute.value.query
    // router.push({
    //   name: (redirect as keyof RouteMap) || 'home',
    //   query: {
    //     ...othersQuery,
    //   },
    // })
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="m-x-a text-center w-7xl">
    <div class="mb-32 mt-20">
      <van-image :src="dark ? logoDark : logo" class="h-120 w-120" alt="brand logo" />
    </div>

    <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="login">
      <div class="rounded-3xl overflow-hidden">
        <van-field
          v-model="postData.uName"
          label="用户名"
          required
          clearable
          left-icon="contact"
          :rules="rules.uName"
          name="uName"
          placeholder="邮箱/手机号码"
        />
      </div>

      <div class="mt-16 rounded-3xl overflow-hidden">
        <van-field
          v-model="postData.uPwdword"
          label="密码"
          left-icon="eye"
          required
          clearable
          type="password"
          :rules="rules.uPwdword"
          name="uPwdword"
          placeholder="请输入密码"
        />
      </div>

      <div class="mt-16">
        <van-button :loading="loading" :disabled="loading" type="primary" native-type="submit" round block>
          确认登录
        </van-button>
      </div>
    </van-form>

    <van-row justify="space-between">
      <van-col span="12">
        <GhostButton block to="register" :style="{ 'margin-top': vw(2) }">
          还没有账号？立即注册
        </GhostButton>
      </van-col>
      <van-col span="6">
        <!-- <GhostButton block to="forgot-password">
          忘记密码
        </GhostButton> -->

        <GhostButton block to="/">
          返回首页
        </GhostButton>
      </van-col>
    </van-row>
  </div>
</template>

<route lang="json5">
{
  name: 'login',
  meta: {
    i18n: 'menus.login'
  },
}
</route>
